<template>
  <div id="LMap"></div>
</template>

  <script>
import region from "../../assets/json/region.json";
import mapConfig from "../../assets/json/mapConfig.json";
import temp from "../../assets/json/temp.json"; //车辆位置
import guiji from "../../assets/json/guiji.json"; //车辆轨迹
import trajectoryAnalysis from "../../assets/js/map/trajectoryAnalysis.minx";

export default {
    mixins: [trajectoryAnalysis],
  data() {
    return {
      map: null,
      layer: null

    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let map = L.map("LMap", {
        minZoom: 3,
        maxZoom: 18,
        center: mapConfig.center,
        zoom: mapConfig.zoom,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });

      L.control.zoom({
          position: 'bottomright'
      }).addTo(map);

      //控制地图底图
      var baseLayers = {
        "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: "1234" }),
       /* "高德影像": L.layerGroup(
          [
            L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { subdomains: "1234" }),
            L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', { subdomains: "1234" })
          ]
        ),*/
        //天地图tk可以换成自己申请的key
        "天地图": L.layerGroup([
          L.tileLayer('http://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }),
          L.tileLayer('http://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] })
        ]),
        "天地图影像": L.layerGroup([
          L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }),
          L.tileLayer('http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] })
        ]).addTo(map),
       /* "天地图地形": L.layerGroup([
          L.tileLayer('http://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }),
          L.tileLayer('http://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] })
        ]),*/

       // "Google地图": L.tileLayer('http://mt1.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile'),
        "Google影像": L.layerGroup([
          L.tileLayer('http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali'),
          L.tileLayer('http://mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil')
        ]),

        //"GeoQ ": L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'),
       // "GeoQ 藏蓝": L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'),
        //"GeoQ 灰": L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}')
      };
      //topright
      L.control.layers(baseLayers, {}, { position: "bottomright" }).addTo(map);

      this.map = map; //data上需要挂载
      window.map = map; //定义全局map属性

      //加载项目边界
      L.geoJSON(region, {
        style: function(feature) {
          return {
            color: "#00ff00",
            fillOpacity: 0,
            fillColor: null
          };
        }
      }).addTo(map);
      this.$http.getGpsElectronicFence().then(res=>{
        if(res.data.data && res.data.data.length > 0){
          var feature = res.data.data[0];
          this.addToMap(feature.surfacesPosition);
        }
      }).catch(err=>{
        throw (err);
      })
      //加载图层
      this.layer = L.layerGroup().addTo(map);

      // this.showLine();
      this.$emit("mapLoaded");
    },
    addToMap(surfacesPosition){
      var layer = new L.layerGroup().addTo(window.map)
      var startIndex = surfacesPosition.lastIndexOf("(")+1;
      var endIndex = surfacesPosition.indexOf(")");
      var points = [],strPoints = surfacesPosition.substring(startIndex,endIndex);
      var p = strPoints.split(",");
      for(var i = 0;i < p.length;i++){
        var po = p[i].split(" ");
        points.push([po[0],po[1]]);
      }
      L.polygon([points],{
        color: "#3388ff",
        fillOpacity: 0,
        fillColor: null
      }).addTo(layer);
    },
    //加载轨迹
    showLine(){
        var latlngs = guiji.features[0].geometry.coordinates;
        var _path = latlngs.map(latlng=>{
            return [latlng[1],latlng[0]];
        });

    },
    //轨迹回放
    startLine(imei){
      var self = this;
      var submitData = {
        imei: '867282037735285',
        startTime: '2020-06-06 13:00:00',
        endTime: '2020-06-06 16:44:14'
      };
      this.$http.getTrack(submitData)
			    .then((res)=>{
            var _path = res.data.data;
            //加载轨迹
            self.layer.clearLayers();
            var polyline = L.polyline(_path, {color: 'red'}).addTo(self.layer);

            //加载起止点坐标
            // var startIcon = L.icon({
            //   iconUrl: require("../../assets/images/map/startPoint.png"),
            //   iconSize: [36, 36]
            // });

            // var endIcon = L.icon({
            //   iconUrl: require("../../assets/images/map/endPoint.png"),
            //   iconSize: [36, 36]
            // });
            // let startPoint = L.marker(_path[0], { icon: startIcon}).bindPopup('起点',{
            //   offset: L.point(0, 0)
            // }).addTo(self.layer);
            // let endPoint = L.marker(_path[_path.length], { icon: endIcon}).bindPopup('终点',{
            //   offset: L.point(0, 0)
            // }).addTo(self.layer);

            self.start(_path);
			    }).catch((err)=>{
			        throw(err)
			    })

    }
  },
  created() {
  	window.startLine=this.startLine;
  },
  destroyed() {
  	window.startLine=null
  }
};
</script>
<style scoped lang="less">
  #LMap {
		width:100%;
		height:100%;
	}
.click_fun {
	position: absolute;
	z-index: 99999;
}

/deep/ .leaflet-popup{
	.leaflet-popup-content-wrapper{
		background: radial-gradient(circle, #002a71, transparent, transparent);
		background-color: #01183f;
		box-shadow: 0px 0px 10px 1px #2977A4 inset;
	}
	.leaflet-popup-content{
		width: auto !important;
		color: #fff;
		display: flex;
		flex-direction: column;
	}
	.header{
		display: flex;
		justify-content: space-between;
		padding: 5px 0px;
		position: relative;
		top: -8px;
		.iconfont{
			&::before{
				margin-right: 15px;
			}
			&.icon-renyua{
				font-size: 14px;
				&::before{
					font-size: 16px;
				}
			}
			&.icon-guiji{
				font-size: 18px;
			}
		}
		.icon-guiji:hover{
			color: #0ac0f6;
			cursor: pointer;
		}
	}
	.ul{
		flex:1;
		overflow: auto;
		max-width:500px;
		max-height: 300px;
		min-height: 120px;
		min-width: 200px;
		.li{
			font-size: 14px;
			line-height: 1.7em;
			display: flex;
			color: #cfe1ff;
			&:nth-child(odd){
				background-color: rgba(23, 83, 185, 0.32);
			}
		}
		.label{
			margin-right:10px;
		}
		.value{
			padding-right:3px;
			flex:1;
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.leaflet-popup-close-button{
		font-size: 20px;
		top: 8px;
		right: 10px;
		&:hover{
			color: #0ac0f6;
		}
	}
	.leaflet-popup-tip{
		background-color: #1c51ad;
	}
}
</style>
